<script>
import {MessA} from "@/api/meseea/Mess";

export default ({
  name: 'index',
  data() {
    return {
      currentPage1: 1,
      currentPage2: 2,
      currentPage3: 3,
      currentPage4: 4,
      MessaG: [],
      meSag: '',
    }
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    Delete() {
      Dte[0].style.display = 'none'
      Dte[1].style.display = 'none'
      Dte[2].style.display = 'none'
      let Dtea = []
      //   删除接口
    },
    Read() {
      read[0].style.display = 'none'
      read[1].style.display = 'none'
      read[2].style.display = 'none'
    },
  },
  created() {
    let data = {
      pageSize: 5,
      pageNumber: 1
    }
    // 消息列表接口
    MessA(data).then(res => {
      res.rows.forEach(item => {
        // console.log(item)
        if (item.isRead == 0) {
          read[0].style.display = 'block'
          read[1].style.display = 'block'
          read[2].style.display = 'block'
        } else {
          read[1].style.display = 'none'
          read[0].style.display = 'none'
          read[0].style.display = 'none'
        }
        this.MessaG = item.psyMessages
        this.MessaG.forEach(item => {
          this.meSag = item
        })
      })
    })
  }
})
</script>

<template>
  <div id="Box">
    <!--首页的总盒子:whole-->
    <div class="whole">
      <!--顶部按钮盒子:top_mesage-->
      <div class="top_mesage">
        <div><p>系统消息</p></div>
        <div>
          <button @click="Read">全部已读</button>
          <button @click="Delete">全部删除</button>
        </div>
      </div>
      <!--消息列表盒子1:mesage_list-->
      <div class="mesage_list" id="Dte">
        <!--消息顶部预约和时间:top_masage-->
        <div class="top_masage">
          <div><p>预约通知</p></div>
          <div><p>{{ this.meSag.sendTime }}</p></div>
          <div id="read"></div>
        </div>
        <!--预约消息内容:masage_main-->
        <div class="masage_main"><p>{{ this.meSag.content }}</p></div>
      </div>

      <!--消息列表盒子2:Mesage_list-->
      <div class="Mesage_list" id="Dte">
        <!--消息顶部预约和时间:top_masage-->
        <div class="top_masage">
          <div><p>预约通知</p></div>
          <div><p>{{ this.meSag.sendTime }}</p></div>
          <div id="read"></div>
        </div>
        <!--预约消息内容:masage_main-->
        <div class="masage_main"><p>{{ this.meSag.content }}</p></div>
      </div>

      <!--消息列表盒子3:mesAge_list-->
      <div class="mesAge_list" id="Dte">
        <!--消息顶部预约和时间:top_masage-->
        <div class="top_masage">
          <div><p>预约通知</p></div>
          <div><p>{{ this.meSag.sendTime }}</p></div>
          <div id="read"></div>
        </div>
        <!--预约消息内容:masage_main-->
        <div class="masage_main"><p>{{ this.meSag.content }}</p></div>
      </div>
      <!--消息管理底部分页器:masage_end-->
      <div class="masage_end">
        <!--分页器右边的盒子-->
        <div>
          <!--分页器UI-->
          <div class="block">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage1"
              :page-sizes="[100, 200, 300, 400,500,600,700,800]"
              :page-size="100"
              layout="total, sizes, prev, pager, next, jumper"
              :total="800">
            </el-pagination>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
* {
  margin: 0;
  padding: 0;
  text-decoration: none;
  box-sizing: border-box;
  list-style: none;

  button {
    cursor: pointer
  }
}

//整体盒子css
#Box {
  width: 100%;
  background-color: rgb(242, 243, 244);
  padding-top: 12px;
}

//内容整体盒子css
.whole {
  width: 1656px;
  height: 992px;
  margin: auto;
  background-color: #fff;
  padding: 41px 24px 10px 54px;
}

//系统消息按钮css
.top_mesage {
  width: 100%;
  display: flex;
  justify-content: space-between;
  //系统消息
  div:nth-of-type(1) {
    font-size: 18px;
    display: flex;
    align-items: flex-end;
  }

  //右边按钮
  div:nth-of-type(2) {
    button {
      border: 1px solid rgba(187, 187, 187, 1);
      width: 109px;
      height: 33px;
      border-radius: 5px;
      background-color: rgba(255, 255, 255, 1);
      color: rgba(102, 102, 102, 1);
      margin-left: 11px;
    }
  }
}

//消息列表盒子1css
.mesage_list {
  margin-top: 30px;
  width: 1578px;
  height: 103px;
  border-radius: 6px;
  border: 1px solid rgba(187, 187, 187, 1);
  padding: 15px 27px 5px 17px;

  //消息顶部预约和时间css
  .top_masage {
    width: 100%;
    display: flex;
    height: 30px;
    justify-content: space-between;
    position: relative;

    p {
      font-size: 14px;
    }

    //左边盒子css
    div:nth-of-type(1) {
      display: flex;
      align-items: flex-end;
    }

    //右边盒子css
    div:nth-of-type(2) {
      display: flex;

      p {
        margin-right: 5px;
      }
    }

    div:nth-of-type(3) {
      width: 10px;
      height: 10px;
      background-color: red;
      border-radius: 50%;
      position: absolute;
      top: 10px;
      left: 55px;
      display: none;
    }
  }

  .masage_main {
    margin-top: 10px;

    p {
      font-size: 14px;
    }
  }
}

//消息列表盒子2css
.Mesage_list {
  margin-top: 5px;
  width: 1578px;
  height: 103px;
  border-radius: 6px;
  border: 1px solid rgba(187, 187, 187, 1);
  padding: 15px 27px 5px 17px;

  //消息顶部预约和时间css
  .top_masage {
    width: 100%;
    display: flex;
    height: 30px;
    justify-content: space-between;
    position: relative;

    p {
      font-size: 14px;
    }

    //左边盒子css
    div:nth-of-type(1) {
      display: flex;
      align-items: flex-end;
    }

    //右边盒子css
    div:nth-of-type(2) {
      display: flex;

      p {
        margin-right: 5px;
      }
    }

    div:nth-of-type(3) {
      width: 10px;
      height: 10px;
      background-color: red;
      border-radius: 50%;
      position: absolute;
      top: 10px;
      left: 55px;
      display: none;
    }
  }

  .masage_main {
    margin-top: 10px;

    p {
      font-size: 14px;
    }
  }
}

//消息列表盒子3css
.mesAge_list {
  margin-top: 5px;
  width: 1578px;
  height: 103px;
  border-radius: 6px;
  border: 1px solid rgba(187, 187, 187, 1);
  padding: 15px 27px 5px 17px;

  //消息顶部预约和时间css
  .top_masage {
    width: 100%;
    display: flex;
    height: 30px;
    justify-content: space-between;
    position: relative;

    p {
      font-size: 14px;
    }

    //左边盒子css
    div:nth-of-type(1) {
      display: flex;
      align-items: flex-end;
    }

    //右边盒子css
    div:nth-of-type(2) {
      display: flex;

      p {
        margin-right: 5px;
      }
    }

    div:nth-of-type(3) {
      width: 10px;
      height: 10px;
      background-color: red;
      border-radius: 50%;
      position: absolute;
      top: 10px;
      left: 55px;
      display: none;
    }
  }

  .masage_main {
    margin-top: 10px;

    p {
      font-size: 14px;
    }
  }
}

//底部分页器css
.masage_end {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  margin-top: 333px;
}
</style>
